<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息上传</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                        success: '#10B981',
                        danger: '#EF4444',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .backdrop-blur-sm {
                backdrop-filter: blur(4px);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
        }
		.container { max-width: 800px; margin-top: 30px; }
		.card { margin-bottom: 20px; }
		.result { margin-top: 20px; padding: 15px; border-radius: 5px; }
		.success { background-color: #d1e7dd; color: #0f5132; }
		.error { background-color: #f8d7da; color: #842029; }
		.warning { background-color: #fff3cd; color: #664d03; }
		.recorder-container { margin-top: 15px; }
		.recorder-controls { display: flex; gap: 10px; margin-bottom: 10px; }
		.audio-preview { margin-top: 10px; padding: 15px; background-color: #f8f9fa; border-radius: 5px; }
		.btn-record { background-color: #dc3545; color: white; }
		.btn-stop { background-color: #ffc107; color: black; }
		.btn-send { background-color: #198754; color: white; }
		.recording-indicator { display: inline-block; width: 10px; height: 10px; background-color: #dc3545; border-radius: 50%; margin-right: 5px; animation: pulse 1.5s infinite; }
		@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="header">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-cloud-upload text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">数据录入</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="admin_home.html" class="text-gray-600 hover:text-primary transition-colors duration-200">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">关于</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">帮助</a>
            </nav>
            <button class="md:hidden text-gray-600 focus:outline-none" id="mobile-menu-button">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-white shadow-md absolute w-full" id="mobile-menu">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#" class="text-gray-600 hover:text-primary py-2 border-b border-gray-100 transition-colors duration-200">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary py-2 border-b border-gray-100 transition-colors duration-200">关于</a>
                <a href="#" class="text-gray-600 hover:text-primary py-2 transition-colors duration-200">帮助</a>
            </div>
        </div>
    </header>

    <main class="flex-grow container mx-auto px-4 py-8">
        <section class="max-w-3xl mx-auto bg-white rounded-xl shadow-md p-6 md:p-8 transition-all duration-300 hover:shadow-lg">
            <div class="text-center mb-8">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-3">上传你的信息</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">点击下方按钮上传你的照片并输入姓名、密码，我们将为你生成一个包含个人信息的文件。</p>
            </div>

            <div class="flex flex-col items-center justify-center h-64 md:h-80 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300 mb-8 transition-all duration-300 hover:border-primary group cursor-pointer" id="upload-area">
                <i class="fa fa-cloud-upload text-4xl md:text-5xl text-gray-400 group-hover:text-primary transition-colors duration-300 mb-4"></i>
                <h3 class="text-lg font-medium text-gray-600 group-hover:text-primary transition-colors duration-300">点击上传信息</h3>
            </div>

            <div class="text-center">
                <button id="upload-btn" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5 flex items-center justify-center mx-auto">
                    <i class="fa fa-upload mr-2"></i>
                    上传照片
                </button>
            </div>

            <!-- 上传结果区域 -->
            <div id="result-area" class="mt-8 hidden">
                <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fa fa-check-circle text-green-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-green-800">上传成功</h3>
                            <div class="mt-2 text-sm text-green-700">
                                <p>JSON 文件已生成，你可以点击下方按钮下载。</p>
                            </div>
                            <div class="mt-4">
                                <button id="download-btn" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-md shadow hover:shadow-md transition-all duration-200 flex items-center">
                                    <i class="fa fa-download mr-2"></i>
                                    下载 JSON 文件
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 弹窗 -->
    <div id="upload-modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
            <div class="p-6">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">上传照片</h3>
                    <button id="close-modal" class="text-gray-400 hover:text-gray-500 focus:outline-none transition-colors duration-200">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <form id="upload-form" class="space-y-4">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                        <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200" placeholder="请输入你的姓名" required>
                    </div>
					<div>
					    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
					    <input type="password" id="password" name="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200" placeholder="请输入你的密码" required>
					</div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">照片</label>
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-primary transition-colors duration-200 cursor-pointer" id="photo-upload-area">
                            <div class="space-y-1 text-center">
                                <i class="fa fa-cloud-upload text-gray-400 text-3xl"></i>
                                <div class="flex text-sm text-gray-600">
                                    <label for="photo" class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80 transition-colors duration-200">
                                        <span>上传照片</span>
                                        <input id="photo" name="photo" type="file" accept="image/*" class="sr-only" required>
                                    </label>
                                    <p class="pl-1">或拖放文件</p>
                                </div>
                                <p class="text-xs text-gray-500">
                                    PNG, JPG (最大: 5MB)
                                </p>
                            </div>
                        </div>
                        <div id="photo-preview" class="hidden mt-3">
                            <img id="preview-image" src="" alt="预览图" class="max-h-40 rounded-lg border border-gray-200">
                        </div>
                    </div>
					<div class="recorder-container">
					    <div class="recorder-controls">
					        <button id="reg_startBtn" class="btn btn-record" onclick="startRecording('reg')">
					            <i class="fa fa-microphone"></i> 开始录音
					        </button>
					        <button id="reg_stopBtn" class="btn btn-stop" onclick="stopRecording('reg')" disabled>
					            <i class="fa fa-stop"></i> 停止录音
					        </button>
					        <button id="reg_sendBtn" class="btn btn-send" onclick="registerFeature()" disabled>
					            <i class="fa fa-paper-plane"></i> 发送录音
					        </button>
					    </div>
						<div id="reg_recordingStatus" class="text-muted mb-2 hidden">
							<span class="recording-indicator"></span>正在录音········
						</div>
					    <div id="reg_audioPreview" class="audio-preview d-none">
					        <h6 class="mb-2">录音预览（可播放）</h6>
					        <audio id="reg_audioPlayer" controls class="w-full mb-2"></audio>
					        <div class="d-flex justify-content-between text-sm text-muted">
					            <span>格式: MP3</span>
					            <span>采样率: 16kHz | 位长: 16bit | 单声道</span>
					        </div>
					    </div>
					</div>
					<div id="verify_result" class="result d-none"></div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" id="cancel-upload" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                            取消
                        </button>
                        <button type="submit" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg shadow hover:shadow-md transition-all duration-200">
                            确定
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // DOM 元素
        const uploadBtn = document.getElementById('upload-btn');
        const uploadModal = document.getElementById('upload-modal');
        const modalContent = document.getElementById('modal-content');
        const closeModal = document.getElementById('close-modal');
        const cancelUpload = document.getElementById('cancel-upload');
        const uploadForm = document.getElementById('upload-form');
        const nameInput = document.getElementById('name');
		const passwordInput = document.getElementById('password');
        const photoInput = document.getElementById('photo');
        const photoUploadArea = document.getElementById('photo-upload-area');
        const photoPreview = document.getElementById('photo-preview');
        const previewImage = document.getElementById('preview-image');
        const resultArea = document.getElementById('result-area');
        const downloadBtn = document.getElementById('download-btn');
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const uploadArea = document.getElementById('upload-area');
        const header = document.getElementById('header');

        // 滚动效果
		
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-4');
            } else {
                header.classList.add('py-4');
                header.classList.remove('py-2', 'shadow');
            }
        });

        // 移动端菜单
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // 显示弹窗
        uploadBtn.addEventListener('click', () => {
            uploadModal.classList.remove('hidden');
            // 动画效果
            setTimeout(() => {
                modalContent.classList.remove('scale-95', 'opacity-0');
                modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        });

        // 隐藏弹窗
        function hideModal() {
            modalContent.classList.remove('scale-100', 'opacity-100');
            modalContent.classList.add('scale-95', 'opacity-0');
            setTimeout(() => {
                uploadModal.classList.add('hidden');
                // 重置表单
                uploadForm.reset();
                photoPreview.classList.add('hidden');
            }, 300);
        }

        closeModal.addEventListener('click', hideModal);
        cancelUpload.addEventListener('click', hideModal);

        // 点击弹窗外部关闭
        uploadModal.addEventListener('click', (e) => {
            if (e.target === uploadModal) {
                hideModal();
            }
        });

        // 照片预览
        photoInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    previewImage.src = event.target.result;
                    photoPreview.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            }
        });
		// !!!!!!!!
		
		// 全局变量
		let audioContext;
		let mediaRecorder;
		let audioChunks = [];
		let currentType = null;
		
		// 初始化音频上下文
		function initAudioContext() {
		    if (!audioContext) {
		        try {
		            audioContext = new (window.AudioContext || window.webkitAudioContext)();
		        } catch (error) {
		            console.error('无法初始化 AudioContext:', error);
		            showResult('reg_result', 'error', '您的浏览器不支持音频录制功能');
		            showResult('verify_result', 'error', '您的浏览器不支持音频录制功能');
		        }
		    }
		}
		
		// 开始录音
		function startRecording(type) {
		    initAudioContext();
		    currentType = type;
		    
		    // 重置状态
		    audioChunks = [];
		    
		    // 更新UI状态 - 显示录音状态文字
		    document.getElementById(`${type}_recordingStatus`).classList.remove('hidden');
		    document.getElementById(`${type}_audioPreview`).classList.add('hidden');
		    document.getElementById(`${type}_startBtn`).disabled = true;
		    document.getElementById(`${type}_stopBtn`).disabled = false;
		    document.getElementById(`${type}_sendBtn`).disabled = true;
		
		    // 请求麦克风权限
		    navigator.mediaDevices.getUserMedia({ audio: true })
		        .then(stream => {
		            // 创建音频源
		            const source = audioContext.createMediaStreamSource(stream);
		            
		            // 创建 MediaRecorder
		            mediaRecorder = new MediaRecorder(stream);
		            
		            // 监听数据可用事件
		            mediaRecorder.addEventListener('dataavailable', event => {
		                audioChunks.push(event.data);
		            });
		            
		            // 监听录音停止事件
		            mediaRecorder.addEventListener('stop', () => {
		                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
		                processAudio(audioBlob, type);
		                stream.getTracks().forEach(track => track.stop());
		                // 停止录音时隐藏状态文字
		                document.getElementById(`${type}_recordingStatus`).classList.add('hidden');
		            });
		            
		            // 开始录音
		            mediaRecorder.start();
		        })
		        .catch(error => {
		            console.error('录音错误:', error);
		            showResult(`${type}_result`, 'error', `录音失败: ${error.message}`);
		            // 错误发生时重新启用录音按钮并隐藏状态文字
		            resetButtons(type);
		            document.getElementById(`${type}_startBtn`).disabled = false;
		            document.getElementById(`${type}_recordingStatus`).classList.add('hidden');
		        });
		}
		
		// 停止录音
		function stopRecording(type) {
			if (mediaRecorder && mediaRecorder.state !== 'inactive') {
				mediaRecorder.stop();
				// 停止录音时隐藏状态文字
				document.getElementById(`${type}_recordingStatus`).classList.add('hidden');
				document.getElementById(`${type}_stopBtn`).disabled = true;
			}
		}
		
		// 处理音频
		function processAudio(audioBlob, type) {
		    // 转换为16kHz采样率（示例函数，实际实现可能需要更复杂的处理）
		    convertTo16kHz(audioBlob)
		        .then(convertedBlob => {
		            // 创建音频URL并设置预览
		            const audioUrl = URL.createObjectURL(convertedBlob);
		            const audioPlayer = document.getElementById(`${type}_audioPlayer`);
		            audioPlayer.src = audioUrl;
		            
		            // 显示预览
		            document.getElementById(`${type}_audioPreview`).classList.remove('d-none');
		            document.getElementById(`${type}_sendBtn`).disabled = false;
		            
		            // 存储处理后的音频
		            window[`${type}AudioBlob`] = convertedBlob;
		        })
		        .catch(error => {
		            console.error('音频处理错误:', error);
		            showResult(`${type}_result`, 'error', `音频处理失败: ${error.message}`);
		            // 错误发生时重新启用录音按钮
		            resetButtons(type);
		            document.getElementById(`${type}_startBtn`).disabled = false;
		        });
		}
		
		// 音频采样率转换（示例实现，实际应用可能需要更复杂的处理）
		function convertTo16kHz(audioBlob) {
		    return new Promise((resolve, reject) => {
		        // 实际项目中可能需要使用 AudioContext 或第三方库进行采样率转换
		        // 这里简化处理，直接返回原始音频（实际应用中需要实现真正的采样率转换）
		        resolve(audioBlob);
		    });
		}
		
		// 创建分组
		function createGroup() {
		    const groupId = document.getElementById('group_id').value.trim() || 'my_group_001';
		    showResult('group_result', 'warning', '正在创建分组...');
		    
		    // 模拟API请求
		    setTimeout(() => {
		        // 实际应用中这里应该发送HTTP请求到后端API
		        showResult('group_result', 'success', `分组 "${groupId}" 创建成功`);
		    }, 1000);
		}
		
		// 注册声纹特征
		function registerFeature() {
		    const featureId = document.getElementById('name').value.trim();
		    const groupId = "01";
		    
		    if (!featureId) {
		        showResult('reg_result', 'error', '请输入用户ID');
		        // 错误发生时重新启用录音按钮
		        document.getElementById('reg_startBtn').disabled = false;
		        return;
		    }
		    
		    const audioBlob = window['regAudioBlob'];
		    if (!audioBlob) {
		        showResult('reg_result', 'error', '请先录制音频');
		        // 错误发生时重新启用录音按钮
		        document.getElementById('reg_startBtn').disabled = false;
		        return;
		    }
		    
		    showResult('reg_result', 'warning', '正在注册声纹特征...');
		    document.getElementById('reg_startBtn').disabled = true;
		    
		    // 模拟API请求
		    setTimeout(() => {
		        // 实际应用中这里应该发送HTTP请求到后端API
		        // 随机模拟成功或失败
		        const isSuccess = Math.random() > 0.2; // 80%成功率
		        
		        if (isSuccess) {
		            showResult('reg_result', 'success', `用户 "${featureId}" 的声纹特征已成功注册到分组 "${groupId}"`);
		            document.getElementById('reg_sendBtn').disabled = true;
		        } else {
		            showResult('reg_result', 'error', `注册失败：声纹质量不足，请重新录制`);
		            // 失败时重新启用录音按钮
		            document.getElementById('reg_startBtn').disabled = false;
		        }
		    }, 1500);
		}
		
		// 验证声纹特征
		function verifyFeature() {
		    const featureId = document.getElementById('name').value.trim();
		    const groupId = "01";
		    const threshold = "0.7";
		    
		    if (!featureId) {
		        showResult('verify_result', 'error', '请输入用户ID');
		        // 错误发生时重新启用录音按钮
		        document.getElementById('verify_startBtn').disabled = false;
		        return;
		    }
		    
		    const audioBlob = window['verifyAudioBlob'];
		    if (!audioBlob) {
		        showResult('verify_result', 'error', '请先录制音频');
		        // 错误发生时重新启用录音按钮
		        document.getElementById('verify_startBtn').disabled = false;
		        return;
		    }
		    
		    showResult('verify_result', 'warning', '正在验证声纹...');
		    document.getElementById('verify_startBtn').disabled = true;
		    
		    // 模拟API请求
		    setTimeout(() => {
		        // 实际应用中这里应该发送HTTP请求到后端API
		        // 生成随机相似度结果
		        const similarity = Math.random().toFixed(2);
		        const isMatch = parseFloat(similarity) >= threshold;
		        
		        if (isMatch) {
		            showResult('verify_result', 'success', 
		                `验证成功！用户 "${featureId}" 的声纹相似度为 ${similarity}（阈值: ${threshold}）`);
		            document.getElementById('verify_sendBtn').disabled = true;
		        } else {
		            showResult('verify_result', 'error', 
		                `验证失败！用户 "${featureId}" 的声纹相似度为 ${similarity}（阈值: ${threshold}）`);
		            // 失败时重新启用录音按钮
		            document.getElementById('verify_startBtn').disabled = false;
		        }
		    }, 1500);
		}
		// 重置按钮状态
		function resetButtons(type) {
			document.getElementById(`${type}_startBtn`).disabled = false;
			document.getElementById(`${type}_stopBtn`).disabled = true;
			document.getElementById(`${type}_sendBtn`).disabled = true;
			document.getElementById(`${type}_recordingStatus`).classList.add('hidden');
			document.getElementById(`${type}_audioPreview`).classList.add('hidden');
		}
		// 显示结果信息
function showResult(elementId, type, message, duration = 5000) {
    const resultElement = document.getElementById(elementId);
    if (!resultElement) return;
    
    resultElement.textContent = message;
    
    // 移除所有状态类
    resultElement.classList.remove('success', 'error', 'warning', 'd-none');
    
    // 添加对应状态类
    resultElement.classList.add(type);
    resultElement.classList.remove('d-none');
    
    // 如果是错误消息，添加抖动动画
    if (type === 'error') {
        resultElement.classList.add('animate-shake');
        setTimeout(() => {
            resultElement.classList.remove('animate-shake');
        }, 1000);
    }
    
    // 自动隐藏结果
    setTimeout(() => {
        resultElement.classList.add('d-none');
    }, duration);
}
		// 添加抖动动画样式
		const style = document.createElement('style');
		style.textContent = `
		    @keyframes shake {
		        0%, 100% { transform: translateX(0); }
		        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
		        20%, 40%, 60%, 80% { transform: translateX(5px); }
		    }
		    .animate-shake {
		        animation: shake 0.5s ease-in-out;
		    }
		`;
		document.head.appendChild(style);
		
		
		
		// !!!!!!!!!!!!



        // 拖放上传
        photoUploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            photoUploadArea.classList.add('border-primary', 'bg-blue-50');
        });

        photoUploadArea.addEventListener('dragleave', () => {
            photoUploadArea.classList.remove('border-primary', 'bg-blue-50');
        });

        photoUploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            photoUploadArea.classList.remove('border-primary', 'bg-blue-50');

            if (e.dataTransfer.files.length) {
                photoInput.files = e.dataTransfer.files;
                // 触发预览
                const event = new Event('change');
                photoInput.dispatchEvent(event);
            }
        });

        // 表单提交
        uploadForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            const name = nameInput.value.trim();
			const password = passwordInput.value.trim();
            const photoFile = photoInput.files[0];
            
            if (!name || !password||!photoFile) {
                alert('请填写姓名、密码并上传照片');
                return;
            }

            // 读取照片为Base64格式
            const reader = new FileReader();
            reader.onload = function(event) {
                const base64Image = event.target.result.split(',')[1]; // 去掉data:URL前缀
                
                // 创建JSON对象，格式为{"Name": 姓名, "Image": 照片Base64格式}
                const userData = {
                    "Name": name,
					"Password":password,
                    "Image": base64Image
                }; 

                // 转换为JSON字符串
                const jsonData = JSON.stringify(userData, null, 2);
                // console.log(jsonData)
				fetch("http://127.0.0.1:5002/image",{
					method:"POST",
					headers:{
						"Content-Type":"application/json"
					},
					body:jsonData,
				})
				.then(response =>response.json())
				.then(data=>{
					alert(data.message)
					// console.log(data.message)
				})
                // 隐藏弹窗
                hideModal();
                
                // 显示结果区域
                resultArea.classList.remove('hidden');
                
                // 下载按钮点击事件
                downloadBtn.addEventListener('click', () => {
                    const blob = new Blob([jsonData], { type: 'application/json' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `${name}_profile.json`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                });
            };
            reader.readAsDataURL(photoFile);
        });
		
        // 主区域点击上传
        uploadArea.addEventListener('click', () => {
            uploadBtn.click();
        });
		
		document.head.appendChild(style);
    </script>
</body>
</html>
    